<template>
  <view>
    <!-- 搜索框的位置 -->
    <UgoSearch></UgoSearch>
    <!-- 轮播图的位置 -->
    <u-swiper :list="swiperData" name="image_src" height="340"></u-swiper>
    <!-- 导航栏中图片的位置 -->
    <view class="navData u-flex">
      <navigator
        class="u-flex-1 u-p-20"
        v-for="item in navData"
        :key="item.name"
      >
        <u-image class="" mode="widthFix" :src="item.image_src"></u-image>
      </navigator>
    </view>
    <!-- 楼层的位置 -->
    <view class="floorData">
      <!-- 一个模块 -->
      <view
        class="floor-group"
        v-for="item1 in FloorData"
        :key="item1.floor_title.name"
      >
        <!-- 标题 -->
        <view class="floor-title">
          <u-image mode="widthFix" :src="item1.floor_title.image_src">
          </u-image>
        </view>
        <!-- 内容 -->
        <view class="floor-content">
          <navigator v-for="item2 in item1.product_list" :key="item2.name">
            <u-image mode="scaleToFill" height="100%" :src="item2.image_src">
            </u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperData: [],
      navData: [],
      FloorData: [],
    };
  },
  //   // 页面开始加载的时候发送请求
  onLoad() {
    // 获取轮播图数据
    this.getSwiperData();
    // 获取导航栏的数据
    this.getNavData();
    // 获取导航栏的数据
    this.getFloorData();
  },
  methods: {
    // 获取轮播图数据
    async getSwiperData() {
      // uni.request 的返回值是个数组 第1个元素是错误信息 第二个元素才是正确数据
      // 解构
      // const [err, res] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      //   // data: {},
      //   // header: {'content-type':'application/json'},
      //   method: "GET",
      // });
      // console.log(res);
      const res = await this.$u.get("/home/swiperdata");
      this.swiperData = res.message;
      // console.log(res );
    },
    // 获取导航栏的数据
    async getNavData() {
      const res = await this.$u.get("/home/catitems");
      // console.log(res);
      this.navData = res.message;
    },
    // 获取楼层的数据
    async getFloorData() {
      const res = await this.$u.get("/home/floordata");
      // console.log(res);

      this.FloorData = res.message;
    },
  },
};
</script>

<style lang="scss">
.UgoSearch {
  background-color: #eb4450;
  padding: 10rpx 20rpx;
}
.floor-content {
  // 清除
  overflow: hidden;
  // 公共样式
  navigator {
    // 浮动
    float: left;

    margin-left: 14rpx;
  }
  // 第一个导航标签
  navigator:first-child {
    width: 232rpx;
    height: 386rpx;
  }
  // 后四个导航标签
  // 前几个 :nth-child(-n+ 几)
  // 后几个 :nth-last-child(-n+ 几)
  navigator:nth-last-child(-n + 4) {
    width: 232rpx;
    height: 188rpx;
  }
  navigator:nth-last-child(-n + 2) {
    margin-top: 14rpx;
  }
}
</style>
